<template>
  <div class="chart-page" :style="size">
    <div v-show="showChart" :style="size" :ref="ref"/>
    <div v-show="!showChart">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {GetOption} from "./statement";

export default {
  name: "Charts",
  props:['chartType','dataSource','legendData','size','index'],
  data(){
    return {
      //option:{},
      ref:`myChart${this.index}`,
      id:`myChart${this.index}`,
      dataSet:[],
      showChart:false,
      myChart:{},
      ready:false,
      chartDom:null,
    }
  },
  mounted() {
    this.ready=true;
    this.chartDom=this.$refs[this.ref];
    this.reload(this.dataSource)
  },
  watch:{
    dataSource:function (n){
      this.reload(n);
    }
  },
  methods:{
    reload(n){
      console.log(JSON.stringify(n))
      this.chartDom=this.$refs[this.ref];
      if(this.ready && !this._func.isEmpty(n)){
        this.dataSet=n;
        if(this.dataSet.length<=1){
          this.showChart=false;
        }else {
          this.showChart=true;
        }
        this.initCharts();
      }
    },
    initCharts(){
      let option=GetOption[this.chartType](this.dataSet);
      //this.chartDom=document.getElementById(this.id);
      this.chartDom=this.$refs[this.ref];
      this.myChart=echarts.init(this.chartDom);
      if(!this._func.isEmpty(option)){
        this.myChart.setOption(option);
      };
    },
  },
  created() {
    this.chartDom=this.$refs[this.ref];
  }
}
</script>

<style scoped>
.chart-page{
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
